<template>
  <div>
    <p class="title">{{floorName.floor1}}</p>
    <ul class="floor clearFix">
      <li v-for="item of floor1" :key="item.goodsId">
        <router-link :to="{path:'/details',query:{id:item.goodsId}}">
          <van-image :src="$filterImage(item.image)" lazy-load></van-image>
        </router-link>
      </li>
    </ul>

    <p class="title">{{floorName.floor2}}</p>
    <ul class="floor clearFix">
      <li v-for="item of floor2" :key="item.goodsId">
        <router-link :to="{path:'/details',query:{id:item.goodsId}}">
          <van-image :src="$filterImage(item.image)" lazy-load></van-image>
        </router-link>
      </li>
    </ul>

    <p class="title">{{floorName.floor3}}</p>
    <ul class="floor clearFix">
      <li v-for="item of floor3" :key="item.goodsId">
        <router-link :to="{path:'/details',query:{id:item.goodsId}}">
          <van-image :src="$filterImage(item.image)" lazy-load></van-image>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      floor1: [],
      floor2: [],
      floor3: [],
      floorName: ""
    };
  },
  created() {
    this.$eventBus.$on("getIndexInfo", res => {
      this.floor1 = res.floor1;
      this.floor2 = res.floor2;
      this.floor3 = res.floor3;
      this.floorName = res.floorName;
    });
  }
};
</script>

<style lang="scss">
@import "@/style/home/floors";
</style>